<template>
  <div class="example3">
    <code-container
      :code="thisCode"
      v-on:close="isShowCode = false"
      v-if="isShowCode"
    ></code-container>
    <data-v-panel class="summary-demo">
      <template slot="title">
        汇总数字
        <a href="javascript:;" class="look-code" @click="lookCode('summary')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-summary
          name="今日公交车运行次数"
          value="123456789"
          type="1"
        ></data-v-summary>
        <data-v-summary
          name="今日公交车运行次数"
          value="123456789"
          type="2"
        ></data-v-summary>
        <data-v-summary
          name="今日公交车运行次数"
          value="123456789"
          type="3"
        ></data-v-summary>
        <data-v-summary
          name="今日公交车运行次数"
          value="123456789"
          type="4"
          color="#10A1FA"
        ></data-v-summary>
        <data-v-summary
          name="今日公交车运行次数"
          value="123456789"
          type="5"
          color="#10A1FA"
        ></data-v-summary>
        <data-v-summary
          name="今日公交车运行次数"
          value="123456789"
          type="6"
          color="#16F8E7"
        ></data-v-summary>
        <data-v-summary
          name="今日公交车运行次数"
          value="123456789"
          type="7"
          color="#16F8E7"
        ></data-v-summary>
        <data-v-summary
          name="今日公交车运行次数"
          value="123456789"
          type="8"
          color="#16F8E7"
        ></data-v-summary>
             <data-v-summary
          name="下载量"
          value="123456789"
          type="9"
          color="#16F8E7"
        ></data-v-summary>
        <data-v-summary
          name="下载量"
          value="123456789"
          type="10"
          color="#16F8E7"
        ></data-v-summary>
        <data-v-summary
          name="下载量"
          value="123456789"
          type="11"
        ></data-v-summary>
        <data-v-summary
          name="下载量"
          value="123456789"
          type="12"
        ></data-v-summary>
        <data-v-summary
          name="下载量"
          value="123456789"
          type="13"
        ></data-v-summary>
        <data-v-summary
          name="下载量"
          value="123456789"
          type="14"
        ></data-v-summary>
        <data-v-summary
          name="下载量"
          value="123456789"
          type="15"
        ></data-v-summary>
        <data-v-summary
          name="下载量"
          value="123456789"
          type="16"
        ></data-v-summary>
   
        <data-v-summary
          name="累计总检测人数"
          value="123456789"
          type="17"
        ></data-v-summary>
   
        <data-v-summary
          name="累计总检测人数"
          value="123456789"
          type="18"
        ></data-v-summary>
   
      </template>
    </data-v-panel>

    <data-v-panel class="summary-demo">
      <template #title>
        汇总数字-方形
        <a
          href="javascript:;"
          class="look-code"
          @click="lookCode('summary-square')"
          >代码</a
        >
      </template>
      <template #body>
        <data-v-summary-square
          name="下载量"
          value="1234"
          type="1"
          color="#16F8E7"
        ></data-v-summary-square>
        <data-v-summary-square
          name="下载量"
          value="5678"
          type="2"
          color="#16F8E7"
        ></data-v-summary-square>
        <data-v-summary-square
          name="下载量"
          value="1234"
          type="3"
          color="#f00"
        ></data-v-summary-square>
        <data-v-summary-square
          name="下载量"
          value="1234"
          type="4"
        ></data-v-summary-square>
        <data-v-summary-square
          name="下载量"
          value="1234"
          type="5"
        ></data-v-summary-square>
        <data-v-summary-square
          name="下载量"
          value="1234"
          type="6"
        ></data-v-summary-square>
        <data-v-summary-square
          name="下载量"
          value="1234"
          type="7"
        ></data-v-summary-square>
        <data-v-summary-square
          name="下载量"
          value="1234"
          type="8"
        ></data-v-summary-square>
        <data-v-summary-square
          name="下载量"
          value="1234"
          type="9"
        ></data-v-summary-square>
        <data-v-summary-square
          name="下载量"
          value="1234"
          type="10"
        ></data-v-summary-square>
      </template>
    </data-v-panel>

    <data-v-panel class="summary-demo">
      <template #title>
        汇总数字-矩形
        <a
          href="javascript:;"
          class="look-code"
          @click="lookCode('summary-rect')"
          >代码</a
        >
      </template>

      <template #body>
        <data-v-summary-rect
          value="￥123456789"
          color="#219A35"
          padding="5"
          v-angle="{ angleLength: 10, lineWidth: 1, color: '#219A35' }"
        ></data-v-summary-rect>
        <data-v-summary-rect
          value="￥123456789"
          color="#CD0414"
          padding="5"
          v-angle="{ angleLength: 10, lineWidth: 1, color: '#CD0414' }"
        ></data-v-summary-rect>
        <data-v-summary-rect
          value="￥123456789"
          color="#14C0D0"
          padding="5"
          v-angle="{ angleLength: 10, lineWidth: 1, color: '#14C0D0' }"
        ></data-v-summary-rect>
        <data-v-summary-rect
          value="￥123456789"
          color="#E45F01"
          padding="5"
          v-angle="{ angleLength: 10, lineWidth: 1, color: '#E45F01' }"
        ></data-v-summary-rect>

        <!-- 以下是带图标的 -->
        <data-v-summary-rect
          value="123456789"
          color="#332B40"
          name="阴性样本数"
          :icon="pic1"
          v-angle="{ angleLength: 4, lineWidth: 1, color: '#fff' }"
        ></data-v-summary-rect>
        <data-v-summary-rect
          value="123456789"
          color="#332B40"
          name="阳性样本数"
          :icon="pic2"
          v-angle="{ angleLength: 4, lineWidth: 1, color: '#fff' }"
        ></data-v-summary-rect>
      </template>
    </data-v-panel>

    <data-v-panel class="summary-demo">
      <template #title>
        汇总数字-渐变背景
        <a
          href="javascript:;"
          class="look-code"
          @click="lookCode('summary-gradient')"
          >代码</a
        >
      </template>

      <template #body>
        <data-v-summary-gradient color="#01b1b1"></data-v-summary-gradient>
        <data-v-summary-gradient color="#0068b7"></data-v-summary-gradient>
        <data-v-summary-gradient color="#6401b1"></data-v-summary-gradient>
        <data-v-summary-gradient color="#c25202"></data-v-summary-gradient>
        <data-v-summary-gradient color="#32b16c"></data-v-summary-gradient>
        <data-v-summary-gradient color="#c91c1c"></data-v-summary-gradient>
      </template>
    </data-v-panel>

    <go-home></go-home>
  </div>
</template>

<script>
import CodeContainer from "./code-container.vue";
import pic1 from "./example3-img/pic1.png";
import pic2 from "./example3-img/pic2.png";
export default {
  name: "example3",
  components: {
    CodeContainer
  },
  data() {
    return {
      thisCode: "",
      isShowCode: false,
      pic1: pic1,
      pic2: pic2,
      angleOpt: {
        angleLength: 10,
        lineWidth: 1,
        color: "#219A35"
      }
    };
  },
  methods: {
    lookCode(name) {
      let filePath = `./docs/${name}.md`;
      // eslint-disable-next-line no-undef
      let loading = ui.loading(2, "加载中...");
      // eslint-disable-next-line no-undef
      get(filePath).then(res => {
        loading.hide();
        this.thisCode = res;
        this.isShowCode = true;
      });
    }
  }
};
</script>

<style lang="less">
.example3 {
  min-height: 100vh;
  padding: 10px;
  background: #000 url(./example1-img/gridBg.png);
  color: #fff;
  .grid-item {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }
  overflow: hidden;

  .summary-demo .c-panel-body {
    display: flex;
    flex-wrap: wrap;
  }
  .summary-demo .data-v-summary {
    width: 360px;
  }
}
</style>
